<template>
	<view class="goods_list">
		<view class="goods_item" v-for="(item,index) in goods" :key="item.index">
			<view class="top">
				<text>{{item.goods_name}}</text>
				<view class="top-right" @click="sellButtonClick(index,item)">
					<text :class="item.status_name === '下架'?'redText':'blueText'">{{item.status_name}}</text>
					<image src="@/static/icon_001.png"></image>
				</view>
			</view>

			<view class="center">
				<image class='img' src="@/static/goods_placeholdImg.png"></image>

				<view class="info">
					<text>结算价: ¥{{item.shop_price}}</text>
					<text>更新时间: {{item.updated_at}}</text>
				</view>
			</view>

			<view class="bottom">
				<button type="primary" @click="editButtonClick(index,item)">编辑</button>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		props: ['goods'], //接收外界传递的数据

		methods: {

			sellButtonClick(index, item) {
				console.log('在售', index, item)
				this.$emit("sellClick", index, item)
			},

			editButtonClick(index, item) {
				// console.log('编辑', index, item)
				this.$emit("editClick", index, item)
			}
		}

	}
</script>

<style lang="scss">
	.redText {
		color: red;
	}

	.blueText {
		color: blue;
	}

	.goods_list {
		.goods_item {
			background-color: white;

			.top {
				background: #F1F7FF;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 10rpx 30rpx;
				line-height: 70rpx;

				.top-right {
					line-height: 70rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;


					text {
						// color: $global-Theme-color;
						font-size: 14px;
						line-height: 70rpx;
						margin-right: 5rpx;
					}

					image {
						line-height: 70rpx;
						width: 32rpx;
						height: 32rpx;
						// background: red;
						margin-top: -5rpx;
					}
				}

			}

			.center {
				display: flex;
				flex-direction: row;
				// background: orange;

				.img {
					width: 140rpx;
					height: 140rpx;
					// background: red;
					margin-left: 30rpx;
					margin-top: 26rpx;
				}

				.info {
					// background: red;
					display: flex;
					flex-direction: column;
					justify-content: flex-start; //左对齐
					margin-left: 26rpx;

					text:nth-child(1) {
						margin-top: 38rpx;
						font-size: 14px;
						color: $global-Theme-color;

					}

				}

			}

			.bottom {
				display: flex;
				flex-direction: row-reverse; //反向横排，排布方向与flex-direction:row相反

				button {
					margin-top: 28rpx;
					margin-left: 570rpx;
					margin-bottom: 30rpx;
					width: 150rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 13px;
					color: #333333; //按钮文字颜色
					// text-align: center;
					border-radius: 30rpx;
					border: 1px solid #EEEEEE; //按钮 边框样式 
					background: white; //按钮背景色

				}
			}

		}


	}
</style>